<template>
  <div class="tennis-rule">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/Index/questionMange/knowledge_spot' }">网球规则</el-breadcrumb-item>
          <el-breadcrumb-item>{{p_cate_name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="3" :offset="15" style="text-align: right;">
        <el-button size="small" type="primary" @click="addColumn">新增知识点</el-button>
      </el-col>
    </el-row>
    <div class="tennis-rule-list">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item :name="index" v-for="(item, index) in ruleList" :key="item.id">
          <template slot="title">
            <div class="list-title" style="display: flex;justify-content: space-between;">
              <div>{{index+1}}、{{item.k_title}}</div>
              <div style="margin-right: 20px;">
                <el-button type="primary" plain size="mini" @click.stop="modifyColumn(item)">修改</el-button>
                <el-button type="danger" plain size="mini" @click.stop="deleteColumn(item.id)">删除</el-button>
              </div>
            </div>
          </template>
          <div class="list-l">
            <el-scrollbar>
              <div class="list-dec" v-html="item.k_content"></div>
            </el-scrollbar>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
  export default {
    props: {},
    data() {
      return {
        ruleList: [],
        id: this.$route.query.id || '',
        p_cate_name: this.$route.query.name || '',
        activeName: 0
      }
    },
    created() {
      this.getRuleList()
    },
    mounted() {},
    computed: {},
    methods: {
      getRuleList() {
        this.$axios.post('Qlib/point_info', {
            id: this.id
          }, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data
            if (code == 2000) {
              this.ruleList = data.res
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      modifyColumn(item) {
        this.$router.push({
          path: '/index/questionMange/knowledge_edit',
          query: {
            id: item.id,
            K_points_list_id: this.id,
            type: '修改知识点内容',
            name: this.p_cate_name
          }
        })
      },
      deleteColumn(id) {
        this.$axios.post('Qlib/delete_point', {
            id: id
          }, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data
            if (code == 2000) {
              this.$message({
                type: 'success',
                message: msg
              })
              this.getRuleList()
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      addColumn() {
        this.$router.push({
          path: '/index/questionMange/knowledge_edit',
          query: {
            K_points_list_id: this.id,
            type: '新增知识点',
            name: this.p_cate_name
          }
        })
      }
    },
  }
</script>
<style scoped lang="less">
  .tennis-rule {
    width: 80%;
    box-sizing: border-box;
    margin: 20px 50px;
  }

  .tennis-rule-list {
    margin-top: 20px;
  }

  .tennis-rule-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px #ccc solid;

    .list-r {
      display: flex;
      align-items: flex-end;
    }

    .list-title {
      margin-bottom: 15px;
    }

    .list-dec {
      margin-bottom: 15px;
      min-height: 200px;
      max-height: 400px;
      // overflow: scroll;
    }

    .list-img {
      width: 300px;
      height: 300px;
      border: 1px solid #000000;
    }
  }
</style>
